<?php
$configKey = isset($configKey) ? $configKey : 'dev-process';
// 开发流程组件配置
$texts = [
    // 文本配置
    'section_pretitle' => '开发方法论',
    'section_title' => '系统化开发流程',
    'section_subtitle' => '我们采用标准化的开发流程，确保每个项目按时交付、质量可靠且符合业务需求'
];

$classes = [
    // 样式配置
    'container_class' => 'w-full mx-auto mb-20',
    'text_center_class' => 'text-center mb-16',
    'title_class' => 'text-3xl font-bold text-gray-900 mb-4',
    'subtitle_class' => 'text-lg text-gray-600 max-w-3xl mx-auto',
    'relative_container_class' => 'relative',
    'connector_class' => 'hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 z-0',
    'grid_class' => 'grid grid-cols-1 md:grid-cols-5 gap-4 md:gap-8 relative z-10',
    'step_container_class' => 'process-step flex flex-col items-center text-center',
    'step_number_class' => 'w-16 h-16 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-2xl font-bold mb-4 shadow-sm',
    'step_title_class' => 'text-xl font-semibold mb-2 text-gray-900',
    'step_description_class' => 'text-gray-600 text-sm'
];

$defaultConfig = [
    'section_id' => 'dev-process',
    'texts' => $texts,
    'classes' => $classes,
    'items' => [
        [
            'step' => 1,
            'title' => '需求分析',
            'description' => '深入理解业务目标与用户需求，确定技术方案与功能范围'
        ],
        [
            'step' => 2,
            'title' => '架构设计',
            'description' => '设计应用架构、数据模型与API接口，确保可扩展性与性能'
        ],
        [
            'step' => 3,
            'title' => '开发测试',
            'description' => '敏捷开发与持续测试，快速迭代并确保代码质量与功能完整性'
        ],
        [
            'step' => 4,
            'title' => '发布上线',
            'description' => '应用商店提交、审核支持与发布策略，确保顺利上线'
        ],
        [
            'step' => 5,
            'title' => '运维迭代',
            'description' => '性能监控、用户反馈收集与持续优化，支持业务长期发展'
        ]
    ]
];

// 合并配置
$data = array_merge($defaultConfig, $pageConfig['components'][$configKey] ?? []);

// 确保样式配置完整
if (!isset($data['classes']['relative_container_class'])) {
    $data['classes']['relative_container_class'] = 'relative';
}

if (!isset($data['classes']['connector_class'])) {
    $data['classes']['connector_class'] = 'hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 z-0';
}
?>
<!-- 开发流程 -->
<div class="<?php echo $data['classes']['container_class']; ?>">
    <div class="<?php echo $data['classes']['text_center_class']; ?>">
        <h2 class="<?php echo $data['classes']['title_class']; ?>"><?php echo $data['texts']['section_title'];?></h2>
        <p class="<?php echo $data['classes']['subtitle_class']; ?>">
            <?php echo $data['texts']['section_subtitle'];?>
        </p>
    </div>
    
    <div class="<?php echo $data['classes']['relative_container_class']; ?>">
        <!-- 连接线 -->
        <div class="<?php echo $data['classes']['connector_class']; ?>"></div>
        
        <div class="<?php echo $data['classes']['grid_class']; ?>">
            <?php foreach ($data['items'] as $step): ?>
                <div class="<?php echo $data['classes']['step_container_class']; ?>">
                    <div class="<?php echo $data['classes']['step_number_class']; ?>">
                        <?php echo $step['step']; ?>
                    </div>
                    <h3 class="<?php echo $data['classes']['step_title_class']; ?>"><?php echo htmlspecialchars($step['title']); ?></h3>
                    <p class="<?php echo $data['classes']['step_description_class']; ?>"><?php echo htmlspecialchars($step['description']); ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 流程步骤动画
    const processSteps = document.querySelectorAll('.process-step');
    const processObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                processObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.2 });
    
    processSteps.forEach((step, index) => {
        step.style.opacity = '0';
        step.style.transform = 'translateY(20px)';
        step.style.transition = `opacity 0.5s ease ${index * 0.15}s, transform 0.5s ease ${index * 0.15}s`;
        processObserver.observe(step);
    });
});
</script>